<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <title>Sortable</title>
  <script src="./node_modules/sortable/ui.js"></script>
  <script src="./node_modules/sortable/static/bundle.js"></script>
</head>
<body>
  <script>
    var array = ['Apple', 'Banana', 'Cherry', 'Durian', 'ElderBerry']
    var emitter = Sortable(array, function template (s) {
      //return html Element.
      var e = document.createElement('h1')
      e.innerText = s
      return e
    }, document.createElement('ol'))
    //listen to changes (newArray, splices)
    emitter.on('change', console.log.bind(console))
  </script>
</body>
</html>